<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>新增学生</title>
    <style>
        form {
            margin: 20px auto;
            width: 500px;
            border: 1px solid #ccc;
            padding: 20px
        }
    </style>
</head>
<body>
    <form method="post" action="../add/" id="add_commit">
    {% csrf_token %}
    <table>

        <tr>
            <th>姓名</th>
            <td><input name="student_name"></td>
        </tr>
        <tr>
            <th>性别</th>
            <td>
                     <select id="mySelect" name="gender" style="width: 166px;height: 24px;">
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
            </td>
        </tr>
        <tr>
            <th>年龄</th>
            <td><input type="number" name="student_age"/></td>
        </tr>
             <tr>
            <th>出生日期</th>
            <td><input type="date" style="width: 160px;" name="birthday"/></td>
        </tr>
        <tr>
            <th>体重</th>
            <td><input type="number" name="weight"/></td>
        </tr>
          <tr>
            <th>身高</th>
            <td><input type="number" name="height"/></td>
        </tr>
        <tr>
            <th>个人简介</th>
            <td><input type="text" name="introduce"/></td>
        </tr>
        <tr>
            <th>照片</th>
            <td>
                <input type="file" name="photo"  onchange="fileSelected();">
            </td>
        </tr>
        <tr>
            <th>班级编号</th>
            <td>
                <input type="number" name="student_class" id="photo" >
            </td>
        </tr>
        <tr>
            <th>班级名称</th>
            <td>
                <input type="text" name="student_class_name"  >
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button"  style="background-color:red;margin-left: 80px;margin-top: 10px;" value="提交" onclick="commit()" />
            </td>
             <td colspan="2">
                <input type="button" style="background-color:red;margin-left: -140px;margin-top: 10px;" value="返回" onclick="javascript:history.back(-1);" />
            </td>
        </tr>
    </table>
</form>
<script>
function commit() {
    const  request = new Object()
    request.student_name = $("input[name='student_name']").val()
    request.gender = $("select[name='gender']").val()
    request.student_age = $("input[name='student_age']").val()
    request.birthday = $("input[name='birthday']").val()
    request.weight = $("input[name='weight']").val()
    request.height = $("input[name='height']").val()
    request.introduce = $("input[name='introduce']").val()
    request.photo = $("input[name='photo']").val()
    request.student_class = $("input[name='student_class']").val()
    request.student_class_name = $("input[name='student_class_name']").val()
    console.log(JSON.stringify(request));
    $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: 'http://localhost:8000/sims/add/',//url
                contentType:'application/json',
                 //在请求头通过csrf认证，键固
                headers:{'X-CSRFToken': $('input[name=csrfmiddlewaretoken]').val()},
                data: JSON.stringify(request),
                success: function (data) {
                    console.log(JSON.stringify(data))
                    if(data.code == 200){
                        alert(data.desc)
                        {#跳转到列表#}
                        window.location.href="../";
                    }else {
                        alert(data.desc)
                    }
                },
                error : function(e) {
                    console.log('e',e)

                    alert("添加学生异常！");
                }
            });
}

function fileSelected() {
    const file = document.getElementsByName('photo').files[0];
    if (file) {
        let fileSize = 0;
        if (file.size > 1024 * 1024)
            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
        else
            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
        console.log( 'Name: ' + file.name,'Size: ' + fileSize, 'Type: ' + file.type)
    }
}

</script>
</body>
</html>